<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: tomato;
    }
  </style>
</head>
<body>
<div onclick="fundiva()"><button onclick="funa()">元素属性绑定事件</button></div>
<div id="demodiv"><button id="btna">注册事件监听器</button></div>
<button id="btnb">元素对象属性绑定事件</button>
<script>
  // 一.元素属性绑定事件:冒泡事件
  function funa() {
  console.log("我是元素属性绑定事件");
  };
  function fundiva() {
    console.log("点击按钮我div也会被触发");
  };
  // 二.注册事件监听器绑定:可在冒泡与捕获之间切换
  //     语法：要点击的.addEventListener("click",function(e){},false)
  //    当为true时候先触发div再触发btn，即事件捕获：由外到内
  //    当为false时候先触发btn再触发div，即事件冒泡：由内到外

/*  // 点击按钮时候先触发div(先打印div),再触发按钮(再打印btn),点击div只执行div
  document.getElementById("btna").addEventListener("click",function (ev) {
    console.log("我是注册事件监听器绑定btn,true时我在div执行完毕后触发")
  },true);
  document.getElementById("demodiv").addEventListener("click",function (ev) {
    console.log("我是注册事件监听器绑定div,true时我执行完毕后btn触发")
  },true);*/

  // 点击按钮时候先触发按钮(先打印btn),再触发div(再打印div),点击div只执行div
  document.getElementById("btna").addEventListener("click",function (ev) {
    console.log("我是注册事件监听器绑定btn,false时我触发完毕div也会被接着触发")
  },false);
  document.getElementById("demodiv").addEventListener("click",function (ev) {
    console.log("我是注册事件监听器绑定div,false时btn触发完毕我div也会被接着触发")
  },false);
  // 三:元素对象属性绑定事件:
  document.getElementById("btnb").onclick=function (ev) {
    console.log("我是元素对象属性绑定事件");
  }
</script>
</body>
</html>
